<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>简单动画</title>
    <script src="jquery-2.2.4.js"></script>
    <style>
        * {
            box-sizing:border-box;
        }
        html,body {
            padding:0;
            margin:0;
            border:0;
            font-size:14px;
            background: black;
        }
        #box {
            width:500px;
            height:350px;
            border:5px solid #ccc;
            position:absolute;
            top:-400px;
            left:50%;
            margin-left:-250px;
        }
        .drag {
            height:30px;
            background:blanchedalmond;
        }
        .content {
            height:310px;
            position:relative;
            background:#E6DCD0;
            overflow: hidden;
        }
        .move {
            height:300px;
            width:370px;
            margin:0 auto;
            background-image:url(img/04c58PICpgw_1024.jpg);
            background-size: 1300%;
        }
        .bot {
            width:100%;
            height:40px;
            background:wheat;
            position:absolute;
            bottom:-40px;
            display:flex;
            align-items:flex-end;
            justify-content: space-around;
            opacity:0.5;
            transition:0.5s ease-out;
        }
        .content .bot div {
            width:40px;
            height:20px;
            background:lightcoral;
            color:white;
            text-align:center;
            margin-bottom:10px;
            line-height:20px;
            border-radius:10px;
            cursor:pointer;
        }
        .all {
            width:100%;
            height:100%;
            background:black;
            position:absolute;
            transition:3s all ease-out;
            z-index:100;
        }
        .all div {
            width:90px;
            height:40px;
            background: steelblue;
            font-size: 20px;
            border-radius:20px;
            margin:40px auto 0;
            line-height:40px;
            text-align:center;
            color:wheat;
        }
        .all p {
            color:wheat;
            text-align:center;
            font-size:60px;
        }
    </style>
</head>
<body>
<div id="wrapper">
    <div class="all">
        <div>点击</div>
    </div>
    <div id="box">
        <div class="drag"></div>
        <div class="content">
            <div class="move"></div>
            <div class="bot">
                <div class="start">开始</div>
                <div class="end">结束</div>
                <div class="close">关闭</div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
<script>
    window.onload = function(){
        var box = document.querySelector('#box');
        var move = document.querySelector('.move');
        var start = document.querySelector('.start');
        var end = document.querySelector('.end');
        var bot = document.querySelector('.bot');
        var close = document.querySelector('.close');
        var all = document.querySelector('.all');
        var clc = document.querySelector('.all div');
        var op = document.createElement('p');
        var text = document.createTextNode('谢谢');
        var oDrag = document.querySelector('.drag');
        var a = 0;
        var cX = 0;
        var cY = 0;
        var cl = 0;
        var ct = 0;
        var timer=null;
        var ary = ['3%','11.5%','20%','28.4%','36.9%','45%','53.5%','62%','70.7%','79.4%','87.7%','96.3%'];
        var turn = true;
        box.onmouseover = function(){
            bot.style.bottom = '0px';
        };
        box.onmouseout = function(){
            bot.style.bottom = '';
        };
        start.onclick = function(){
            if(turn){
                timer = setInterval(function(){
                    a++;
                    if(a>11){a = 0}
                    console.log(a);
                    move.style.backgroundPosition = ary[a] + '-280px';
                },200);
                turn = false;
                start.innerHTML = '暂停';
            }else{
                clearInterval(timer);
                turn = true;
                start.innerHTML = '开始';
            }
        };
        end.onclick = function(){
            move.style.backgroundPosition = "";
            clearInterval(timer);
            start.innerHTML = '开始';
            turn = true;
            return false;
        };
        close.onclick = function(){
            all.style.top = '0px';
            move.style.backgroundPosition = "";
            clearInterval(timer);
        };
        clc.onclick = function(){
            all.style.top = '-100%';
            box.style.top = '50px';
            box.style.transition = '3s ease-out';
            op.appendChild(text);
            all.appendChild(op);
        };
        oDrag.onmousedown = function(e){
            cX = e.pageX - box.offsetLeft;
            cY = e.pageY - box.offsetTop;
            maxL = document.documentElement.clientWidth - box.offsetWidth;
            maxT = document.documentElement.clientHeight - box.offsetHeight;
            document.onmousemove = function(e){
                cl = e.pageX-cX;
                ct = e.pageY -cY;
                if(cl <= 0){cl = 0}
                if(ct <= 0){ct = 0}
                if(cl >= maxL){cl = maxL}
                if(ct >= maxT){ct = maxT}
                box.style.left = (cl + 250)+ 'px';
                box.style.top = ct + 'px';
                box.style.transition = null;
            };
        };
        document.onmouseup = function(){
            document.onmousemove = null;
        };
    }
</script>